<template>
  <!-- 面包屑 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">校外教师</el-breadcrumb-item>
    <el-breadcrumb-item>校外课题实践</el-breadcrumb-item>
    <el-breadcrumb-item>发布历史</el-breadcrumb-item>
    <el-breadcrumb-item>校外课题实践发布</el-breadcrumb-item>
  </el-breadcrumb>

  <div>
    <h2 style="border-bottom: 1px solid #e0e0e0; padding-bottom: 5px;margin: 10px;">校外课题实践发布</h2>
  </div>
  <!-- 主要内容 -->
  <div style="margin: 2% 2% 2% 2%;border: 1px solid #e0e0e0; border-radius: 5px;">

    <h1 style="margin: 2% 2% 2% 2%;border-bottom: 1px solid #e0e0e0;">基本信息</h1>
    <!-- 基本信息 -->
    <div style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;">
      <el-form :model="form" size="large" :label-position="right" label-width="100px" style="width: 60%">
        <el-form-item label="题目名称">
          <el-input v-model="innerPublish.taskName" style=" width: 50%;" />
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="innerPublish.practicalId" placeholder="选择班级">
            <el-option v-for="item in classNum" :key="item.practicalId" :label="item.className"
              :value="item.practicalId" />
          </el-select>
        </el-form-item>
        <el-form-item label="人数/子任务数">
          <el-input v-model="innerPublish.memberMax" style=" width:25%;" readonly="true" />
        </el-form-item>
        <el-form-item label="实践时间">
          <el-col :span="6">
            <el-date-picker v-model="innerPublish.startDate" type="date" placeholder="Pick a date"
              value-format="YYYY-MM-DD" style="width: 100%" />
          </el-col>
          <el-col :span="1" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="6">
            <el-date-picker v-model="innerPublish.endDate" type="date" placeholder="Pick a date" value-format="YYYY-MM-DD"
              style="width: 100%" />
          </el-col>
        </el-form-item>
        <el-form-item label="实践内容">
          <el-input v-model="innerPublish.content" type="textarea" style=" width: 80%;" />
        </el-form-item>
        <el-form-item label="评分标准">
          <el-input v-model="innerPublish.scaleRule" type="textarea" style=" width: 80%;" />
        </el-form-item>
      </el-form>
    </div>

    <!-- 子任务信息 -->
    <h1 style="margin: 2% 2% 2% 2%;border-bottom: 1px solid #e0e0e0;">子任务信息</h1>
    <div>
      <div v-for="(item, index) in innerSubTask" :key="index"
        style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;">
        <el-form :label-position="right" label-width="100px" style="width: 60%">
          <el-form-item label="任务题目" size="large">
            <el-input style="width: 50%" v-model="item.subtaskName" />
          </el-form-item>
          <el-form-item label="任务描述" size="large">
            <el-input type="textarea" style="width: 80%" v-model="item.subtaskContent" />
          </el-form-item>
        </el-form>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" :offset="13">
          <el-button @click="addTables" type="primary" style="background-color: #545c64;">添加子任务</el-button>
          <el-button @click="removeTable" type="danger" style="background-color:#545c64">删除子任务</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 发布和返回按钮 -->
    <el-row :gutter="20" style="margin-top: 1%;">
      <el-col :span="6" :offset="9">
        <el-button size="large" type="primary" @click="publish" style="background-color: #545c64;">发布</el-button>
        <el-button size="large" @click="$router.push('offCampus')">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search, Plus } from '@element-plus/icons-vue'
import { ref, onBeforeMount, computed } from 'vue'
import requests from '../../../api/ajax.js'
import { postCousePublish } from '../../../api/index.js';
import { useRouter } from 'vue-router'
import { watch } from 'vue';
import { ElMessage } from 'element-plus';
const router_useRouter = useRouter()


//任务详情（不包含子任务）
const innerPublish = ref({
  taskName: '',
  practicalId: '',
  memberMax: '1',
  startDate: '',
  endDate: '',
  content: '',
  scaleRule: '',
})

//子任务题目和内容
const innerSubTask = ref([
  {
    subtaskName: '',
    subtaskContent: '',
  },
])

//添加子任务输入框
function addTables() {
  if (innerSubTask.value.length < 4) {
    innerSubTask.value.push({},); // 添加一个空对象
    innerPublish.value.memberMax = innerSubTask.value.length;
  } else {
    alert('最多四个子任务')
  }
}
//删除子任务输入框
function removeTable() {
  if (innerSubTask.value.length > 1) {
    innerSubTask.value.pop(); // 删除最后一个对象
    innerPublish.value.memberMax = innerSubTask.value.length;
  } else {
    alert('至少要有两个子任务')
  }

}

//挂在前
onBeforeMount(() => {
  const asd = requests({ url: "/outer/outerClass", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    classNum.value = abc
  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });

  //     const acd = requests({ url: "/taskBaseVo/course", method: "get",}).then(res => {
  //             //存储用户信息到浏览器toke
  //             const abc =res.data.rdata
  //             courseOptions.value = abc

  //     })
  //     .catch(err => {
  //         console.error(err.data);
  //         // 登录请求失败后的操作
  //     });
})


//班级选择
const classNum = ref([
  {
    // practicalId:'',
    // planId: '',
    // classId: '',
    // className: "",
    // adviserId: '',
    // adviserName: '',
    // teachId: '',
    // teachName: '',
    // practicalType: '',
    // onloadDate: ''
  }
])


//发布并返回到发布历史页面
function publish() {
  // let akl = JSON.stringify(innerPublish);
  const campusOffPublish = innerPublish.value;
  const campusOffSubtasks = innerSubTask.value;

  // akl.push('innerSubtasks',innerSubTask.value)
  const acd = requests({ url: "/outer/outerPublish", method: "post", data: {campusOffPublish,campusOffSubtasks} }).then(res => {
    if(res.code == 20011){
      ElMessage.success(res.msg)
      router_useRouter.push({ path: 'offCampus' })
    }else{
      ElMessage.error('发布失败')      
    }
  })
    .catch(err => {
      console.error(err);
      // 登录请求失败后的操作
    })
  // alert('发布成功')
  
}


</script>
<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>